<template>
    <div>

           <!-- 探索栏 -->
        <div class="column">
        <h2>继续探索</h2>
        <van-swipe>
            <van-swipe-item v-for="(c_card,i) in 4" :key="i">
            <div class="column_card" id="c_card">
                <van-image
                width="100%"
                height="50%"
                fit="cover"
                src="https://img01.yzcdn.cn/vant/cat.jpeg"
                />
                <h4>千湖之地</h4>
                <van-divider
                :style="{
                    borderColor: '#c8c8c8',
                    padding: '0 1rem',
                }"
                >
                </van-divider>
                <span
                >了解详情&nbsp;&nbsp;<van-icon name="arrow" size="16px"
                /></span>
            </div>
            </van-swipe-item>
        </van-swipe>
        </div>
    </div>
</template>

<script>
    export default {
        
    }
</script>

<style lang="scss" scoped>
.column {
  padding: 1.5rem;
  #t_card {
    background-color: #78006e;
    color: #fff;
  }
  #tansuo {
    background-color: #78006e;
    color: #fff;
    line-height: 2rem;
    text-align: center;
    border-radius: 1rem;
    width: 30%;
  }
  .column_card {
    box-shadow: 0 0 5px 5px #ddd;
    border-radius: 10px;
    overflow: hidden;
    margin: 1rem 0.5rem;
    position: relative;

    h4 {
      padding: 1rem 0 1rem 1rem;
      font-size: 20px;
    }
    p {
      padding: 0 1rem;
      overflow: hidden;
      word-break: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    span {
      padding: 0 0 1rem 1rem;
      font-size: 20px;
      display: block;
    }
  }
}
</style>